import React, { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Card, Skeleton, Button } from 'antd-mobile'
import TopNavbar from '../../components/TopNavbar'
import styles from './index.module.css'
import { fetchArticleById } from '../../services/homeService'
import { logClick, logExposure } from '../../services/tracking'

const HealthDetail = () => {
  const { id } = useParams()
  const navigate = useNavigate()
  const [loading, setLoading] = useState(true)
  const [article, setArticle] = useState(null)

  useEffect(() => {
    let mounted = true
    setLoading(true)
    fetchArticleById(id).then(data => {
      if (!mounted) return
      setArticle(data)
      logExposure('资讯详情曝光', { id })
    }).finally(() => mounted && setLoading(false))
    return () => { mounted = false }
  }, [id])

  return (
    <div className={styles.page}>
      <TopNavbar title="资讯详情" showBack onBack={() => navigate(-1)} />
      <div className={styles.container}>
        {loading ? (
          <Card className={styles.card}>
            <Skeleton.Title animated />
            <Skeleton.Paragraph animated lineCount={4} />
          </Card>
        ) : (
          article && (
            <Card className={styles.card}>
              <div className={styles.titleRow}>
                <div className={styles.title}>{article.title}</div>
                <div className={styles.viewCount}>👁️ {article.views}人已读</div>
              </div>
              <div className={styles.authorRow}>
                <div className={styles.authorInfo}>
                  <div className={styles.authorAvatar}>👨‍⚕️</div>
                  <div className={styles.authorMeta}>
                    <div className={styles.authorName}>刘医生 主任医师</div>
                    <div className={styles.authorDept}>门诊外一科 四川省保健院南苑</div>
                  </div>
                </div>
                <Button size='small' color='primary' className={styles.followBtn}>关注</Button>
              </div>
              <div className={styles.content}>
                菱角是菱科菱属一年生草本水生植物菱的果实。菱角皮脆肉美，蒸煮后剥壳食用，也可以熬粥食用。菱角含有丰富的蛋白质、不饱和脂肪酸及多种维生素和微量元素。具有利尿通乳、止渴、解酒毒的功效。
                {'\n\n'}
                1、补脾益气{'\n'}
                生菱角性凉，具有清热降火的功效，而熟菱角则有益脾健胃的功效。
                {'\n\n'}
                2、抗癌{'\n'}
                菱角还可以"醒脾、解酒毒、补中"。民间用菱角治疗癌症，近代研究也表明菱角醇提取物有抗癌作用。
                {'\n\n'}
                3、减肥{'\n'}
                菱角具有利尿通乳、止渴、解酒毒、治疮毒、去疣的功效，还能促进体态健美，是减肥的辅助食品。
                {'\n\n'}
                4、缓解皮肤病{'\n'}
                菱角内服外用，可辅助治疗小儿头疮、头面黄水疮、皮肤疣等多种皮肤病。
              </div>
              <div className={styles.footer}>
                <div className={styles.tag}>#{article.tag}</div>
                <div className={styles.publishTime}>发布于2020-01-01 15:20:20</div>
              </div>
              <div className={styles.actions}>
                <div className={styles.btn}>暂无法评论</div>
                <div className={styles.btn}>❤️ 收藏</div>
                <div className={styles.btn} onClick={() => logClick('资讯点赞', { id })}>👍 点赞({article.likes})</div>
              </div>
            </Card>
          )
        )}
      </div>
    </div>
  )
}

export default HealthDetail


